import React from 'react';
import './index.css';
import { ListView, PullToRefresh } from 'antd-mobile';

/**
 * @Note 长列表控件， 带上/下刷新
 *
 * @param className String 传递过来的自定义class名字
 * @param data [] 传递过来的数据源
 * @param renderFooter render 底视图，一般用来底部刷新展示
 * @param renderRow render 每一行的渲染视图
 * @param onEndReached event 上拉加载更多的回调事件
 *
 * @param onPullToRefresh bool 传递true，加载下拉刷新控件，不传或者no去掉下拉刷新控件
 * @param refreshing true 带有下拉刷新控件后，控件的刷新状态，谁使用，谁控制
 * @param onRefresh event 带有下拉刷新控件后，下拉加载最新的回调事件
 *
 */

export default class MZListView extends React.Component {
    constructor(props) {
        super(props);

        // 创建ListViewDataSource对象
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2
        })
        this.state = {
            dataSource
        }
    }

    render() {
        let { dataSource } = this.state;
        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID}></div>
            )
        }
        return (
            <ListView
                className={this.props.className ? ([`${this.props.className}`, `mz-list-view-background`].join(' ')) : 'mz-list-view-background'}
                dataSource={this.props.data ? dataSource.cloneWithRows(this.props.data) : dataSource.cloneWithRows([])}
                renderFooter={this.props.renderFooter ? this.props.renderFooter : null}
                renderRow={this.props.renderRow ? this.props.renderRow : row}
                initialListSize={this.props.initialListSize ? this.props.initialListSize : 0}
                pullToRefresh={this.props.onPullToRefresh && this.props.onPullToRefresh == true ? <PullToRefresh
                    refreshing={this.props.refreshing ? this.props.refreshing : false}
                    onRefresh={this.props.onRefresh}
                /> : null}
                onEndReachedThreshold={10}
                onEndReached={this.props.onEndReached ? this.props.onEndReached : null}
                pageSize={5}
            />
        )
    }
}
